Skip to content

Conversation

@bradlc
Copy link
Contributor

@bradlc bradlc commented Oct 19, 2020

Building on @jquense's PR (#1799), and some work done on Tailwind CSS IntelliSense, this PR adds suggestions when attempting to access unknown or invalid paths with the theme helper function.

Examples

Unknown top-level path
'colours.gray.100' does not exist in your theme config. Your theme has the following top-level keys: 'colors'

Unknown object key
'colors.red' does not exist in your theme config. 'colors' has the following valid keys: 'blue', 'yellow'

Unknown object key with close alternative
'colors.yellw' does not exist in your theme config. Did you mean 'colors.yellow'?

Key of non-object
'colors.yellow.100' does not exist in your theme config. 'colors.yellow' is not an object.

Invalid value
'colors' was found but does not resolve to a string.

Object that has valid keys
'colors' was found but does not resolve to a string. Did you mean something like 'colors.yellow'?

Known issues

As @jquense mentioned in their PR, postcss-functions does not expose the CSS node, so errors are thrown against the root node, which isn't mega helpful. I think the only way around this would be to fork postcss-functions. Curious to get your thoughts on that.

@adamwathan adamwathan merged commit 5bf4699 into master Oct 19, 2020
@adamwathan adamwathan deleted the theme-function-errors branch October 19, 2020 12:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants